<template>
	<div class="table">
		<el-table
			border
			:stripe="tableData.stripe"
			ref="singleTable"
			:default-sort="tableData.sort ? tableData.sort : false"
			:data="tableData.tableConent"
			highlight-current-row
			@select="changeSelect"
			@cell-click="tableCellClick"
			@row-click="rowClick"
			style="width: 100%"
			:row-key="getRowKey"
			:header-cell-style="{ height: '48px' }"
			:row-style="{ height: '48px' }"
			:cell-style="{ padding: '0' }"
			:tooltip-effect="tooltipEffect"
		>
			<el-table-column v-if="tableData.showChioce" type="radio" :disabled="true" align="center" width="50" :reserve-selection="true">
				<template slot-scope="scope">
					<el-radio :label="scope.row" v-model="radioId">&nbsp;</el-radio>
				</template>
			</el-table-column>
			<el-table-column v-if="tableData.showCheck" type="selection" label="请选择" :disabled="true" align="center" width="50" :reserve-selection="true" :selectable="(row, index) => {
				return tableData.tableConent[index].selectable !== false;
			}"> </el-table-column>
			<slot name="formListStatus"></slot>
			<el-table-column v-if="tableData.showIndex" type="index" label="序号" width="50" height="48" align="center"></el-table-column>
			<el-table-column
				v-for="(item, index) in tableData.tableHead"
				:sortable="index === 2 && tableData.sort"
				height="48"
				align="center"
				:property="item.prop"
				:key="index"
				:label="item.label"
				:min-width="item.width ? item.width : 'auto'"
				:show-overflow-tooltip="item.tooltip"
			>
				<template slot-scope="scope">
					<div v-if="scope.row.clickableProps">
						<div class="cell" v-if="canClick(item.prop, scope)" @click="onRowPropClick(item.prop, scope)" style="cursor:pointer;">
							<div v-if="getPropClickType(item.prop, scope) === 'text'">
								<div style="color: #5A9CF8;">{{ scope.row[item.prop] }}</div>
							</div>
							<div v-else>{{ scope.row[item.prop] }}</div>
						</div>
						<div v-else>{{ scope.row[item.prop] }}</div>
					</div>
					<div v-else>{{ scope.row[item.prop] }}</div>
				</template>
			</el-table-column>
			<slot name="key"></slot>
			<slot name="status"></slot>
			<slot name="details"></slot>
			<!-- 变量状态 只在客户信息，业务信息用得到-->
			<slot name="variableStatus"></slot>
			<slot name="picture"></slot>
			<!-- 表格超过部分用...替代展示 -->
			<slot name="hidden"></slot>
			<slot name="btn"></slot>
		</el-table>
	</div>
</template>

<script>
/**
 * 可以通过给 tableData.tableContent 的每个 item 添加 clickableProps: [ {clickType: 'text', clickProp: prop} ] 来添加点击事件，
 * 触发后会发送 this.$emit('tableRowPropClicked', prop, scope) 事件
 */
export default {
	props: {
		tableData: {
			type: Object,
			defualt: () => {}
		},
		tableSelections: {
			type: Array,
			default: () => []
		},
		// 鼠标hover全部提示与toltip显示全部提示语
		tooltipEffect: {
			type: [String],
			default: 'dark'
		}
	},
	data() {
		return {
			currentSelected: [],
			radioId: ''
		};
	},

	mounted() {},
	methods: {
		canClick(prop, scope) {
			let canClick = false;
			if (scope.row.clickableProps?.length < 1) {
				return canClick;
			}
			for (let i = 0; i < scope.row.clickableProps.length; i++){
				if (scope.row.clickableProps[i].clickProp === prop) {
					canClick = true;
					return canClick;
				}
			}
			return canClick;
		},
		getPropClickType(prop, scope) {
			for (let i = 0; i < scope.row.clickableProps.length; i++){
				if (scope.row.clickableProps[i].clickProp === prop) {
					return scope.row.clickableProps[i].clickType;
				}
			}
		},
		onRowPropClick(prop, scope) {
			this.$emit('tableRowPropClicked', prop, scope);
		},
		rowClick(row) {
			this.radioId = row.variableName;
			this.$emit('rowClick', this.radioId);
		},
		getRowKey(row) {
			return row.id;
		},
		changeSelect(selection, row) {
			// 多选
			if (this.tableData.checkedGroup) {
				this.currentSelected = selection;
				this.$emit('changeSelect', this.currentSelected, row);
			} else {
				// 单选
				const selectTable = this.$refs.singleTable;
				selectTable.clearSelection();
				if (selection.includes(row)) {
					this.$nextTick(() => {
						selectTable.toggleRowSelection(row, true);
						this.currentRow = row;
						this.$emit('changeSelect', row);
					});
				} else {
					this.$emit('changeSelect', '');
				}
				this.currentRow = '';
			}
		},
		currentChange(currentRow) {
			console.log(currentRow);
			if (this.tableData.checkedGroup) {
				this.$refs.singleTable.toggleRowSelection(currentRow);
				this.$emit('currentChange', currentRow);
			} else {
				this.$refs.singleTable.clearSelection();
				this.$refs.singleTable.toggleRowSelection(currentRow);
				this.$emit('currentChange', currentRow);
			}
		},
		tableCellClick(row, cell) {
			this.$emit('tableCellClick', row, cell);
		}
	}
};
</script>

<style lang="less">
.table {
	.el-table {
		width: 100%;
		overflow: auto;
	}
	.el-table thead {
		tr {
			background-color: #eee;
		}
		.el-table-column--selection .cell {
			display: none !important;
		}
	}
	.el-table__fixed-right {
		height: 100% !important;
		bottom: 1px;
	}
	.el-table .cell {
		font-size: 12px !important;
	}

	td {
		.el-tooltip {
			div {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
.el-tooltip__popper {
	white-space: pre-wrap;
	max-width: 400px;
}
</style>
